<template>
    <div id="login">
        <div id="bgd">
            <vue-particles
          color="#FF359A"
          :particleOpacity="0.7"
          :particlesNumber="110"
          shapeType="circle"
          :particleSize="4"
          linesColor="#FF359A"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="2"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
          class="lizi"
          >
          
        </vue-particles>
            <canvas id='myCanvas' :width='width' :height='height'>
            </canvas>
        </div>
        <div id="loginBox">
            
            <h4 align="center">Wander购票（￣︶￣）↗　</h4>
            <el-form :model="loginForm"  ref="loginForm" label-width="0px">
                <el-form-item p虎rop="username" style="margin-top:5px;">
                    <el-input prefix-icon="el-icon-user-solid" class="inps" ref="username" v-model="loginForm.username"
                        placeholder="用户名"  type="text" tabindex="1" auto-complete="on"></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-key" show-password class="inps"  ref="password"
                        v-model="loginForm.password"  placeholder="密码"  tabindex="2"
                        auto-complete="on" ></el-input>
                </el-form-item>
                <div style="padding-top: 20px;margin-left: 15px; ">
                    <el-checkbox v-model="loginForm.remember" style="color:#fff">记住密码</el-checkbox>
                    <div style="float: right">
                        <el-tooltip class="item" effect="dark" content="请联系管理员修改" placement="bottom">
                            <el-link style="font-weight: bolder;font-size: 14px;color: #91949c;" :underline="false">
                                忘记密码?
                            </el-link>
                        </el-tooltip>
                    </div>
                </div>
                <el-form-item style="margin-top:15px;">
                    <el-button type="primary" round @click="postLogin" class="btn">Login
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {Login} from "../api/user"
    export default {
    
        data() {
            return {
                loginForm: {
                    username: "",
                    password: "",
                    remember:""
                },

                canvas: null,
                context: null,
                stars: [], //星星数组
                shadowColorList: [
                    "#39f",
                    "#ec5707",
                    "#b031d4",
                    "#22e6c7",
                    "#92d819",
                    "#14d7f1",
                    "#e23c66"
                ], //阴影颜色列表
                directionList: ["leftTop", "leftBottom", "rightTop", "rightBottom"], //星星运行方向
                speed: 50, //星星运行速度
                last_star_created_time: new Date(), //上次重绘星星时间
                Ball: class Ball {
                    constructor(radius) {
                        this.x = 0;
                        this.y = 0;
                        this.radius = radius;
                        this.color = "";
                        this.shadowColor = "";
                        this.direction = "";
                    }

                    draw(context) {
                        context.save();
                        context.translate(this.x, this.y);
                        context.lineWidth = this.lineWidth;
                        var my_gradient = context.createLinearGradient(0, 0, 0, 8);
                        my_gradient.addColorStop(0, this.color);
                        my_gradient.addColorStop(1, this.shadowColor);
                        context.fillStyle = my_gradient;
                        context.beginPath();
                        context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
                        context.closePath();

                        context.shadowColor = this.shadowColor;
                        context.shadowOffsetX = 0;
                        context.shadowOffsetY = 0;
                        context.shadowBlur = 10;

                        context.fill();
                        context.restore();
                    }
                }, //工厂模式定义Ball类
                width: window.innerWidth,
                height: window.innerHeight,
                
            };
        },
        methods: {
            postLogin(){
              Login(this.loginForm).then(res=>{
                  localStorage.setItem("uid",res.data.user.id);
                  localStorage.setItem("token",res.data.token);
                  this.$router.push({path:"/",replace:true})
              })
            },
            //重复动画
            drawFrame() {
                let animation = requestAnimationFrame(this.drawFrame);
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.createStar(false);
                this.stars.forEach(this.moveStar);
            },
            //展示所有的星星
            createStar(params) {
                let now = new Date();
                if (params) {
                    //初始化星星
                    for (var i = 0; i < 50; i++) {
                        const radius = Math.random() * 3 + 2;
                        let star = new this.Ball(radius);
                        star.x = Math.random() * this.canvas.width + 1;
                        star.y = Math.random() * this.canvas.height + 1;
                        star.color = "#ffffff";
                        star.shadowColor = this.shadowColorList[
                            Math.floor(Math.random() * this.shadowColorList.length)
                        ];
                        star.direction = this.directionList[
                            Math.floor(Math.random() * this.directionList.length)
                        ];
                        this.stars.push(star);
                    }
                } else if (!params && now - this.last_star_created_time > 3000) {
                    //每隔3秒重绘修改颜色其中30个球阴影颜色
                    for (var i = 0; i < 30; i++) {
                        this.stars[i].shadowColor = this.shadowColorList[
                            Math.floor(Math.random() * this.shadowColorList.length)
                        ];
                    }
                    this.last_star_created_time = now;
                }
            },
            //移动
            moveStar(star, index) {
                if (star.y - this.canvas.height > 0) {
                    //触底
                    if (Math.floor(Math.random() * 2) === 1) {
                        star.direction = "leftTop";
                    } else {
                        star.direction = "rightTop";
                    }
                } else if (star.y < 2) {
                    //触顶
                    if (Math.floor(Math.random() * 2) === 1) {
                        star.direction = "rightBottom";
                    } else {
                        star.direction = "leftBottom";
                    }
                } else if (star.x < 2) {
                    //左边
                    if (Math.floor(Math.random() * 2) === 1) {
                        star.direction = "rightTop";
                    } else {
                        star.direction = "rightBottom";
                    }
                } else if (star.x - this.canvas.width > 0) {
                    //右边
                    if (Math.floor(Math.random() * 2) === 1) {
                        star.direction = "leftBottom";
                    } else {
                        star.direction = "leftTop";
                    }
                }
                if (star.direction === "leftTop") {
                    star.y -= star.radius / this.speed;
                    star.x -= star.radius / this.speed;
                } else if (star.direction === "rightBottom") {
                    star.y += star.radius / this.speed;
                    star.x += star.radius / this.speed;
                } else if (star.direction === "leftBottom") {
                    star.y += star.radius / this.speed;
                    star.x -= star.radius / this.speed;
                } else if (star.direction === "rightTop") {
                    star.y -= star.radius / this.speed;
                    star.x += star.radius / this.speed;
                }
                star.draw(this.context);
            }
        },
        mounted() {
            this.canvas = document.getElementById("myCanvas");
            this.context = this.canvas.getContext("2d");

            this.createStar(true);
            this.drawFrame();
        }
    };
</script>

<style>
    #login {
        width: 100vw;
        padding: 0;
        margin: 0;
        height: 100vh;
        font-size: 16px;
        background-repeat: no-repeat;
        background-position: left top;
        background-color: #242645;
        color: #fff;
        font-family: "Source Sans Pro";
        background-size: 100%;
        /* background-image: url("../assets/img/background.png"); */
        background: linear-gradient(230deg,
                rgba(20, 193, 138, 0.807) 0%,
                rgba(248, 223, 112, 0.372) 100%);
        position: relative;
    }

    #bgd {
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }

    #loginBox {
        width: 400px;
        height: 380px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 15px;
        padding: 50px 40px 40px 40px;
        opacity: 1;
        /* background: linear-gradient(230deg,
                rgba(20, 193, 138, 0.807) 0%,
                rgba(248, 223, 112, 0.372) 100%); */
        box-shadow: -5px 5px 5px gray;
        background: whitesmoke;
    }

    .inps input {
        border: none;
        color: #fff;
        background-color: transparent;
        font-size: 20px;
    }

    .iconfont {
        color: #fff;
    }

    h4 {
        margin-top: 5px;
        display: block;
        text-align: center;
        font-weight: 300;
        font-size: 30px;
        font-weight: bold;
        line-height: 1;
        background: cadetblue;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }



    .btn {
        margin-top: 10px;
        width: 80px;
        height: 40px;
        color: white;
        background: #68a2e4f1;
        border-radius: 5px;

    }

    .btn:hover {
        background: #136fd7;
    }

    .btn:active {
        margin-top: 18px;
        width: 80px;
        height: 40px;
        color: white;
        border-radius: 5px;
        background: #4a9bfa;
        opacity: 0.5;
    }

  </style>